<script setup>
	import config from './config'
	import { cloneDeep } from 'lodash-es'
	import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import { designStore } from '@/views/plugin/dashboard/store'
	const useDesignStore = designStore()
	const props = defineProps({
		config: {
			type: Object,
			default: () => config
		}
	})
	const container = computed(() => ({
		padding: `${props.config.style.paddingT}px ${props.config.style.paddingR}px ${props.config.style.paddingB}px ${props.config.style.paddingL}px`,
		background: props.config.style.bgColor,
		borderColor: props.config.style.borderColor,
		borderWidth: props.config.style.borderWidth + 'px',
		borderStyle: props.config.style.borderStyle,
		borderTopLeftRadius: props.config.style.bgRTL + 'px',
		borderTopRightRadius: props.config.style.bgRTR + 'px',
		borderBottomLeftRadius: props.config.style.bgRBL + 'px',
		borderBottomRightRadius: props.config.style.bgRBR + 'px',
		boxShadow: `${props.config.style.shadowX}px ${props.config.style.shadowY}px ${props.config.style.shadowDegree}px ${props.config.style.shadowColor}`
	}))

	// 接数据源
	const formState = ref(cloneDeep(props.config.data))
	const oldDataSetJson = ref({})
	// 获取数据源数据函数
	const fetchChartData = async (isFlag = false) => {
		const { dataSetType, dataSetJson } = props.config.dataSetConfig
		const isNew = isFlag || JSON.stringify(oldDataSetJson.value) !== JSON.stringify(dataSetJson)
		formState.value = props.config.data
		// 如果是静态数据
		if (dataSetType === 0) return

		// 仅在 dataSetId 实际改变时才重新获取数据
		if (dataSetType === 1 && dataSetJson && Object.keys(dataSetJson).length > 0 && isNew) {
			// 更新值
			oldDataSetJson.value = dataSetJson
			// 模拟接口返回下拉数据
			await datasetApi.preview(dataSetJson).then((res) => {
				const dataSource = res || []
				// 模拟接口返回数据源
				try {
					const list = []
					dataSource.forEach((item) => {
						const url = item[props.config.data.list.field]
						if (/http/.test(url)) {
							list.push(url)
						}
					})
					formState.value.list.value = list
				} catch (error) {
					console.log(error, '数据格式错误')
					formState.value.list.value = []
				}
			})
		}
	}

	const onReload = (isFlag = false) => {
		fetchChartData(isFlag)
	}
	defineExpose({ onReload })
</script>

<template>
	<div class="container" :style="container">
		<a-carousel
			:arrows="props.config.style.changeBtn"
			style="height: 100%; width: 100%"
			:dot-position="props.config.style.dotPosition"
			:dots="props.config.style.dots"
			:effect="props.config.style.effect"
			:autoplay="props.config.style.autoplay"
		>
			<template #prevArrow>
				<div class="custom-slick-arrow" style="left: 10px; z-index: 10">
					<left-circle-outlined />
				</div>
			</template>
			<template #nextArrow>
				<div class="custom-slick-arrow" style="right: 10px; z-index: 10">
					<right-circle-outlined />
				</div>
			</template>
			<div v-for="(item, index) in formState.list.value" :key="index">
				<img :src="item" style="height: 100%; width: 100%" />
			</div>
		</a-carousel>
	</div>
</template>

<style scoped lang="less">
	.container {
		padding: 10px; // 增加内边距
		height: 100%;
		width: 100%;
	}
	:deep(.slick-slide) {
		height: 100% !important;
	}
	:deep(.slick-slide > div) {
		height: 100% !important;
	}
	:deep(.slick-slide > div > div) {
		height: 100% !important;
	}
	:deep(.slick-initialized) {
		height: 100% !important;
	}
	:deep(.slick-list) {
		height: 100% !important;
	}
	:deep(.slick-track) {
		height: 100% !important;
	}
	:deep(.slick-slide) {
		text-align: center;
		height: 160px;
		line-height: 160px;
		background: #364d79;
		overflow: hidden;
	}

	:deep(.custom-slick-arrow) {
		width: 25px;
		height: 25px;
		font-size: 25px;
		color: #fff;
		background-color: rgba(31, 45, 61, 0.11);
		transition: ease all 0.3s;
		opacity: 0.3;
		z-index: 1;
	}
	:deep(.custom-slick-arrow:before) {
		display: none;
	}
	:deep(.custom-slick-arrow:hover) {
		color: #fff;
		opacity: 0.5;
	}

	:deep(.slick-slide h3) {
		color: #fff;
	}
	:deep(:where(.css-dev-only-do-not-override-1vncnly).ant-carousel .slick-list .slick-slide > div > div) {
		vertical-align: top !important;
	}
</style>
